這幾天都會針對 JavaScript 和 bootstrap 5 做一個大略的回顧，假如對這兩個語法已經十分認識的朋友們，其實就可以直接跳過前面這幾篇囉。

▸ 變數命名

剛接觸程式的時候，也曾經為了命名糾結過一陣子（？），後來了解到駝峰式的命名，現在就可以輕鬆命名了，其實沒有，現在換糾結怎麼將變數命名的容易辨別，能夠使專案更易維護 XD

我們概略的知道小駝峰就是第一個單字小寫開始，第二個單字大寫開始，譬如：myDemo；大駝峰就是每一個單字都使用大寫開始，譬如：MyDome。我較習慣使用小駝峰的命名法，那我們就直接開始這一題的任務。

任務：

條件：

1. 宣告變數、函式，變數請給予值
2. 變數名稱請用小駝峰的方式定義，並以非動詞作為開頭
3. 函式請用動詞作為開頭

變數:
1. 我的名稱: myName
2. 餐廳數量: restaurantNum
3. 課程 id: classId
4. 畢業日期: graduateDate
5. 練習時間: practiceTime

函式:
1. 取得產品資料: getProductData
2. 渲染圖表: renderChart
3. 篩選購物車資料: filterCartData
4. 排序註冊日期: sortRegisterDate
5. 刪除訂單: delete

▸ 物件取值

物件取值常見的兩種方式，點記法 ( Dot notation ) 以及括弧記法 ( Bracket notation )。先簡單解釋一下這兩樣東西。

點記法 ( Dot notation )

我們可以利用點記法存取物件的屬性或函式，例如：

person.Jemma
person.item[0]

括弧記法 ( Bracket notation )

與點記法一樣是存取物件的方式，兩者可以互相配合使用，例如：

person[Jemma]
person['item']['first']

任務：

let c = ' 這是中文字';
let arr = {
  a: 'a',
  1: 'b',
  ' 這是中文字': 'c',
  'b': 'd',
  '--some data': 'e'
}

console.log();  // 請取得結果為 'b' 的值
console.log();  // 請取得結果為 'c' 的值，必須使用變數
console.log();  // 請取得結果為 'd' 的值，必須使用點記號
console.log();  // 請取得結果為 'e' 的值

console.log();  // 請取得結果為 'b' 的值
// console.log(arr[1]); 結果：b

console.log();  // 請取得結果為 'c' 的值，必須使用變數
// console.log(arr[' 這是中文字']); 結果：c

console.log();  // 請取得結果為 'd' 的值，必須使用點記號
// 這裡有兩種方法，點記法和括弧記法都可以讓結果是 'd'，不果題目說要點記法
// console.log(arr['b'])、console.log(arr.b); 結果：d

console.log();  // 請取得結果為 'e' 的值
// console.log(arr['--some data']); 結果：e

▸ 物件觀念

使用 Object.keys() 和 Object.values() 來執行題目要求：

任務：

1. 建立一個陣列，其中包含所有的屬性名稱 ( 需使用 Object.keys )。
2. 建立一個陣列，其中包含所有的屬性值 ( 需使用 Object.values )。
3. 承接第 1 題，透過 forEach、使用 console.log 輸出陣列的所有屬性名稱。
4. 承接第 2 題，透過 for 迴圈、使用 console.log 輸出陣列的所有屬性值。

let c = ' 這是中文字';
let arr = {
  a: 'a',
  1: 'b',
  ' 這是中文字': 'c',
  'b': 'd',
  '--some data': 'e'
}

console.log(Object.keys(arr)); // 1
console.log(Object.values(arr)); // 2

// 3
let a = Object.keys(arr);
a.forEach(function(item) {
	console.log(item);
})

// 4
let b = Object.values(arr);
for(let i = 0; i < b.length; i++) {
	console.log(b[i]);
}

▸ 陣列操作

任務 ①

這題我自己是直接用 filter 方法結束這回合，而題目的解答則是用 callback 函式的方式處理，將函式作為參數調用。

以下 crowdAge 為部分民眾的年紀資料，請修改程式碼、篩選出屬性 age > 18 的陣列元素，並將它們一一加入 filterResult 這個陣列中。( 可以使用 push() 或是 filter() 函式 )

let crowdAge = [
  {
    name: 'Rick',
    age: 17
  },
  {
    name: 'Jane',
    age: 25
  },
  {
    name: 'Jordan',
    age: 19
  },
  {
    name: 'Jack',
    age: 7
  },
  {
    name: 'Reol',
    age: 27
  }
]

// callback 函式
function ageFilterCB(cb, arr) {
  return cb(arr);
}

function ageFilter(arr) {
  let target = [];
  arr.forEach(item => {
  	if(item.age > 18) {
    	target.push(item);
    }
  })
  return target;
}

let filterResult = [];
filterResult = ageFilterCB(ageFilter, crowdAge);
console.log(filterResult); /* 為陣列，內容包含屬性 age > 18 的 crowdAge 元素 */

任務 ➁

請使用 map() 操作 array 陣列，賦予 newArray 陣列元素。

const array = [
    {
      name: '小明',
      age: 18
    },
    {
      name: '小美',
      age: 15
    },
    {
      name: '小櫻',
      age: 19
    },
    {
      name: '知世',
      age: 22
    },
    {
      name: '雪兔',
      age: 28
    }
];

let newArray = array.map(function(item) {
	return `${item.name} + ${item.age} + '歲囉'`;
})

任務 2，同樣也可以用來當作 filter 的練習，這裡就不再做演示了。

▸ 加總技巧

任務：

小明有固定存錢的好習慣，以下是小明的銀行帳戶資訊。

1. 請協助他將存款資訊 mingTransfer 的內容合併到 mingAccount.depositRecord 陣列中 (使用 .push())。
2. 請將他各月的存款累加到 mingAccount.deposit 中 (可以使用 forEach() 或 reduce())

// 小明的銀行帳戶資訊
let mingAccount = {
  name: '小明',
  age: 22,
  deposit: 10000,
  depositRecord: [
    {
      title: '開戶',
      amounts: 10000
    }
  ]
};
// 小明的存款資訊
let mingTransfer = [
  {
    title: '一月存款',
    amounts: 777
  },
  {
    title: '二月存款',
    amounts: 7000
  },
  {
    title: '三月存款',
    amounts: 70000
  }
]

mingTransfer.forEach(function(item) {
	mingAccount.depositRecord.push(item);
	mingAccount.deposit += item.amounts;
})

console.log(mingAccount);
// {name: '小明', age: 22, deposit: 87777, depositRecord: Array(4)}

▸ 函式運用

任務：

step1. 將 town 的內容複製到 townData。

step2. 將 Ming、Rick 兩個物件加入到 townData.resident 中

let town = {
  name: '真心鎮',
  resident: []
}
let townData = {};
let Ming = { name: '小明', age: 16 };
let Rick = { name: '瑞克', age: 21 };

function addResident(obj, res1, res2) {
    townData = {...obj};
    townData.resident.push(res1);
    townData.resident.push(res2);
    console.log(townData)
}

addResident(town, Ming, Rick);
console.log(townData === town); // 結果須為 false

▸ 表達式觀念

陳述式：陳述式通常會是一段程式碼，並且一定會做些什麼，但不會回傳值。

表達式：表達式則會回傳值。

任務 ①

以判斷式判斷下列選項，何者代入 Ans 為表達式，並且 console.log 不會報錯？

if(Ans) {
  console.log('Ans 是表達式');
}

1. 2 === 2
2. "string"
3. var a // Ⓧ Uncaught SyntaxError: Unexpected token 'var'
4. if(true){let a = 2;} // Ⓧ Uncaught SyntaxError: Unexpected token 'if'
5. [25, 30] // 純陣列
6. {name: "hexSchool"}  // 純物件

答案：1、2、5、6

任務 ②

表達式的應用：

function newData() {
  return true;
}

以上程式碼為一個「表達式」，請大家到 MDN 或是透過 Google 搜尋，尋找有哪些程式運作可以插入以上的表達式，仍能正確運行。

function newData() {
  return true;
}

let newDataGetTrue = `可以運行：${newData()}`;
console.log(newDataGetTrue);
// 可以運行：true

▸ 型別轉換

任務：

1. 取得範例中的 input DOM 元素，並且取得其中的值 （DOM 結構上取得的都是字串）
2. 將值定義成變數命名為 value
3. 使以下判斷式驗證執行 if 的結果 ( 答錯魯一輩子喔 :D )

<input type="text" value="520" id="app">

const inputValue = document.querySelector('#app').value;
value = parseInt(inputValue);
if(value === 520) {
  console.log('暗戀對象喜歡我');
} else {
  console.log('暗戀對象只想和我當普通朋友');
}

這題要看清楚，畢竟是型別轉換練習，所以取的會是數字型別的 value。看到這題的時候，真心覺得這題錯不得阿（？

那麼今天的 JavaScript 小回顧就先告一個段落，目前依然是深夜時段了，休息是為了走更長遠的路，我們明天繼續，歐鴨司咪拿塞。